<template>
  <div>
    <van-cell class="comment-detail" v-for="(article,index) in list" :key="index">
      <div class="name-image" slot="title">
        <van-image round class="aut-image" fit="cover" :src="article.aut_photo" />
        <div class="aut-name">{{article.aut_name}}</div>
      </div>

      <div class="aut-content" slot="label">
        <div class="comment-content">{{article.content}}</div>
        <div class="bottom-info">
          <span class="comment-pubdate">{{article.pubdate | relativeTime}}</span>
        </div>
      </div>

      <div slot="default" :class="{likeit:article.is_liking}" @click="islike(article)">
        <van-icon name="good-job" />
        {{article.like_count||'赞'}}
      </div>
    </van-cell>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { CommentLikingslAPI, CommentDisLikingslAPI } from '@/api/comment'
export default {
  name: 'ArticelComment',
  // import引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    list: {
      type: Array,
      require: true
    }
  },
  data () {
    // 这里存放数据
    return {

    }
  },
  // 计算属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    async islike (article) {
      console.log(article.aut_id, article.is_liking)
      try {
        if (article.is_liking) {
          await CommentDisLikingslAPI(article.com_id)
        } else {
          const data = await CommentLikingslAPI(article.com_id)
          console.log(data)
        }
      } catch (error) {
        this.$toast('操作失败')
      }
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () { }, // 生命周期 - 创建之前
  beforeMount () { }, // 生命周期 - 挂载之前
  beforeUpdate () { }, // 生命周期 - 更新之前
  updated () { }, // 生命周期 - 更新之后
  beforeDestroy () { }, // 生命周期 - 销毁之前
  destroyed () { }, // 生命周期 - 销毁完成
  activated () { } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped lang='less'>
.comment-detail {
  .name-image {
    display: flex;
    .aut-name {
      margin-left: 10px;
    }
  }
  .aut-content {
    .comment-content {
      margin: 40px 0 25px 0;
      color: black;
      font-size: 30px;
    }
  }
  .aut-image {
    width: 75px;
    height: 75px;
  }
  .likeit {
    color: red;
  }
}
</style>
